<template>
	<view class="active">
		<van-nav-bar class="titleBox" title="二维码信息" left-arrow @click-left="onClickLeft" />
		</van-nav-bar>
		<view class="QRbox">
			<text class="QRtitle">{{QRtitle}}</text><br>
			<text class="line">-----------------</text>
			<view class="QR">
				<!-- 以下2行代码canvas和image为二维码生成 -->
				<canvas class="canvas-hide" canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
				<image class="qrImg" :src="qrcodeSrc" />
			</view>
			<!-- <text class="txtQR">{{qrcodeText}}</text> -->
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js'
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		},
		props:['QRCode'],
		data() {
			return {
				QRtitle: '预约时请出示二维码',
				// 以下是二维码数据
				qrcodeText: '',
				qrcodeSize: uni.upx2px(590),
				qrcodeSrc: '',
				barcode:''
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		         //打印出上个页面传递的参数。
				 console.log(option);
				this.qrcodeText=option.barcode;
				console.log('二维码编号:'+this.qrcodeText);
				this.make()
		    },
		methods: {
			onClickLeft() {
				console.log('点击了');
				uni.navigateBack({
				    delta: 1
				});
				
			},
			make() { //此方法是生成二维码及数据
				// // 随机取6位0-9的正整数
				// var rand ='';
				// for (var i = 0; i < 6; i++ ) {
				// 	rand += Math.floor(Math.random() * 10);//'2'+'8'='28'
				// }
				// this.qrcodeText=rand;
				// console.log("字符串"+this.qrcodeText)
				uQRCode.make({
					canvasId: 'qrcode',
					text: this.qrcodeText,
					size: this.qrcodeSize,
					margin: 10//以上可理解为--传参
				}).then(res => {//以下可理解为--获取数据
					console.log('图片数据返回成功 ' + res)
					this.qrcodeSrc = res
				}).finally(() => {
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style>
	.canvas-hide {
		position: fixed;
		right: 100vw;
		bottom: 100vh;
		z-index: -9999;
		opacity: 0;
	}

	body {
		background-color: #e5e5e5;
	}
    .QRtitle {
		font-size: 18px;
	}
	.QRbox {
		width: 530upx;
		height: 640upx;
		background-color: #fff;
		margin: 0 auto;
		margin-top: 120upx;
		border-radius: 14px;
		box-shadow: 3px 3px 2px rgba(153, 153, 153, 0.1);
		letter-spacing: 2px;
		text-align: center;
		font-size: 26px;
		color: #007AFF;
		padding: 30upx 0;

	}

	.QRbox .QR {
		width: 180px;
		height: 180px;
		margin: 0 auto;
		margin-top: 50upx;
		margin-bottom: 40upx;
		text-align: center;
	}

	.QR .qrImg {
		width: 180px;
		height: 180px;
		display: inline;
	}

	.QRbox text {
		margin: 40px 0;
	}
	.QRbox .line {
	   color: #cccccc;
	}

	.txtQR {
		color: #333333;
		font-size: 16px;
	}
</style>
